/*
 * @Author: ZARR 
 * @Date: 2018-03-26 10:24:35 
 * @Last Modified by: ZARR
 * @Last Modified time: 2018-03-30 10:39:40
 * @作用：DPOWER详情页介绍
 */
<template>
   <div id="dpower">
      <swellpro-bar :barData="barData" :offsetTopNow="topToScreen"></swellpro-bar>
      <section class="section-1" :style="{'backgroundImage': (!isMobile ?  `url(https://cdn.swellpro.cn/dpower/drone-power-bank-45k.jpg)` : `url(https://cdn.swellpro.cn/mobileDpower/drone-power-bank-45k-m.jpg)`)}">
        <div class="container">
          <div>
            <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInLeft'">
            <h1>DronePower 45K</h1>
            </animation-content>
            <p></p>
            <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInRight'">
            <h2>小身材大能量，充电速度快到不可想象！</h2>
            </animation-content>
          </div>
        </div>
      </section>
      <section class="section-2" :style="{'backgroundImage': (!isMobile ?  `url(https://cdn.swellpro.cn/dpower/inlineP.jpg)` : `url(https://cdn.swellpro.cn/mobileDpower/inlineM.jpg)`)}">
        <div class="container">
          <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUpSmall'">
            <h2>内外兼优，细微之处见品质</h2>
            <p>
              外观设计新颖时尚，搭配智能LCD显示屏，充满科技感。外壳选用优质高分子材料，两个通风口的设计十分精巧，有效助于电源散热。内部采用高强度阻燃材质，使DronePower 45K 更加稳定和安全。
            </p>
          </animation-content>
        </div>
      </section>
      <div class="section-3 mobile-3" style="background:#090909;color:#fff" >
        <div class="container" style="padding-top:30px">
          <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUpSmall'">
          <h2>大容量，出行无忧</h2>
          <p>
            45000毫安/14.8V的澎湃容量，能为单块5200毫安航模锂电池充电高达8次左右，有效延长户外飞行时间。持久续航，可以轻松满足一整天的户外拍摄需求，还能帮您省去额外购买电池和充电器的费用。
          </p>
          </animation-content>
        </div>
      </div>
      <img src="https://cdn.swellpro.cn/dpower/large-capacity.jpg" alt="" class="maxScreen">
      <section class="section-4">
        <div class="container">
          <img :src="isMobile ? 'https://cdn.swellpro.cn/mobileDpower/number-of-charges-m.jpg' : 'https://cdn.swellpro.cn/dpower/number-of-charges.jpg'" alt="">
          <div class="first one line-1 column-1">
            <p class="title"><span>39 </span>次</p>
            <p>(DJI SPARK)</p>
          </div>
          <div class="first two line-1 column-2">
            <p class="title"><span>15 </span>次</p>
            <p>(DJI MAVIC PRO)</p>
          </div>
          <div class="first three line-1 column-3">
            <p class="title"><span>7 </span>次</p>
            <p>(DJI PHANTOM 4)</p>
          </div>
          <div class="first four line-2 column-1">
            <p class="title"><span>9 </span>次</p>
            <p>(DJI PHANTOM 3 SE)</p>
          </div>
          <div class="first five line-2 column-2">
            <p class="title"><span>31 </span>次</p>
            <p>(4s 1300mah Battery)</p>
          </div>
          <div class="second one line-2 column-3">
            <p class="title"><span>22 </span>次</p>
            <p>(3s 2600mah Battery)</p>
          </div>
          <div class="second two line-3 column-1">
            <p class="title"><span>8 </span>次</p>
            <p>(SPLASH DRONE 3)</p>
          </div>
          <div class="second three line-3 column-2">
            <p class="title"><span>98 </span>次</p>
            <p>(IPHONE 8)</p>
          </div>
          <div class="second four line-3 column-3">
            <p class="title"><span>66 </span>次</p>
            <p>(IPHONE X)</p>
          </div>
          <div class="second five line-4 column-1">
            <p class="title"><span>21 </span>次</p>
            <p>(IPAD PRO)</p>
          </div>
        </div>
      </section>
      <section class="section-2 section-5" :style="{'backgroundImage': (!isMobile ?  `url(https://cdn.swellpro.cn/dpower/charge-on-the-go.jpg)` : `url(https://cdn.swellpro.cn/mobileDpower/charge-on-the-go-m.jpg)`)}">
        <div class="container">
          <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInRight'">
            <h2>一提在手，轻送带走</h2>
            <p>
              DronePower 45K 身材小巧，拥有自带提手式设计，一拎就能将它轻松带走。同时配有定制的手提箱，外出携带非常方便。
            </p>
          </animation-content>
        </div>
      </section>
      <section class="section-3 section-6" :style="{'backgroundImage': (!isMobile ?  `url(https://cdn.swellpro.cn/dpower/flash-charge.jpg)` : `url(https://cdn.swellpro.cn/mobileDpower/flash-charge-m.jpg)`)}">
        <div class="container">
          <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUpSmall'">
          <h2>充电速度，快到不可想象</h2>
          <p>
            搭载高能闪充技术，一块5200毫安的航模锂电池用平衡充电器充满电需要一个半小时，高电流输出的DronePower 45K 可在35分钟左右迅速充满。充电速度足足提升了2倍，无需久等，享受光速般的快感！
          </p>
          </animation-content>
        </div>
      </section>
      <div class="section-3 section-7">
        <div class="container">
          <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUpSmall'">
          <h2>大度兼容，不受约束</h2>
          <p>
            兼容市面上99%的数码设备，如普通2s-4s无人机电池，普通航模锂电池，大疆精灵3精灵4系列，御系列和晓系列等。几乎带有usb的数码设备，都可使用DronePower 45K 来充电。
          </p>
          </animation-content>
        </div>
      </div>
      <img :src="!isMobile ? 'https://cdn.swellpro.cn/dpower/power-bank-for-drones.jpg' : 'https://cdn.swellpro.cn/mobileDpower/power-bank-for-drones-m.jpg'" alt="">
      <section class="section-2 section-8" :style="{'backgroundImage': (!isMobile ?  `url(https://cdn.swellpro.cn/dpower/smart-management.jpg)` : `url(https://cdn.swellpro.cn/mobileDpower/smart-management-m.jpg)`)}">
        <div class="container">
          <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInLeft'">
            <h2>智能化管理系统，省力更省心</h2>
            <p>
               智能过载保护装置，防止瞬间超大电流烧坏电路。LCD显示屏在充电过程中实时自动更新显示充电宝和电池状态。电池充满后，DronePower 45K 会自行断开，防止过充。智能化设计，安全可靠更放心。
            </p>
          </animation-content>
        </div>
      </section>
      <div id="speci">
        <div class="container">
          <div class="top">
             <p class="title">
               规格
             </p>
             <div class="items">
               <div class="item">
                 <p>电芯：18650锂离子电芯</p>
                 <p>18650电芯：3000毫安</p>
                 <p>电芯数量：60颗</p>
                 <p>容量：45000毫安  14.8V</p>
                 <p>能量：666Wh</p>
                 <p>额定输入：5-18V 5A</p>
                 <p>额定输出：2~4S 3~8A</p>
               </div>
               <div class="item">
                 <p>显示：智能LCD数字调控屏</p>
                 <p>尺寸：228x160x103mm</p>
                 <p>重量：3610克</p>
                 <p>使用寿命：500次</p>
                 <p>充电时间：约6小时</p>
                 <p>工作温度：0℃-40℃</p>
               </div>
             </div>
          </div>
          <div class="bottom">
             <p class="title">
               包装
             </p>
             <img :src="isMobile ? 'https://cdn.swellpro.cn/mobileDpower/package.jpg' : 'https://cdn.swellpro.cn/dpower/package.jpg' " alt="">
             <div class="abso power">
               充电站X1
             </div>
             <div class="abso adaptor">
               18V/5A适配器X1
             </div>
             <div class="abso line">
               适配器电源线X1
             </div>
             <div class="abso pack">
               手提包X1
             </div>
          </div>
        </div>
      </div>
   </div>
</template>

<script>
import {chectIsMobile} from '~/assets/util'
import SwellproBar from '~/components/headerBar'
import AnimationContent from '~/components/Animation'
export default {
  data () {
    return {
        isMobile:false,
        barData:{
                barTitle:'DronePower 45K 便携式充电站',
                buyUrl:'',
                items:[]
        },
        topToScreen:0
    }
  },

  head() {
    return {
        title: 'DronePower 45K 无人机便携式充电站',
        meta: [
               { hid: 'description', name: 'description', content: 'DronePower 45K 便携式充电站拥有巨大能量并能实现快速充电'},
               { hid: 'keywords', name: 'keywords', content: '无人机充电宝、DronePower 45K 、便携式充电站'}
        ]
    }
  },

  components: {
    SwellproBar,AnimationContent
  },

  computed: {},

  mounted(){
     this.init();
  },

  methods: {
      init(){
         if(chectIsMobile())
         this.isMobile = true;
         window.onscroll = ()=>{ //获取滚动条离浏览器顶部的距离
    		   var e=document.documentElement.scrollTop||document.body.scrollTop;
           this.topToScreen = e;
    	   }
      }
  }
}

</script>
<style lang='stylus' scoped>
#dpower
  color #ffffff
  >img
    width 100%
    display block
  #speci
    background #2d2d2d
    padding 30px 0
    .title
      font-size 30px
    .top
      .items
        display flex
        padding 30px 0
        border-bottom 1px solid rgba(255,255,255,.8)
        .item
          flex 1
          p
            line-height 30px
    .bottom
      padding 30px 0
      position relative
      >img
        width 100%
        display block
      .abso
        position absolute
        font-weight 100 
      .power
        bottom 20px
        left 65px
      .spark
        left 320px
        top 200px
      .pro
        left 320px
        top 350px
      .adaptor
        top 230px
        left 350px
      .line
        left 350px
        top 360px
      .pack
        top 360px
        left 700px
  section
      background-position center
      background-repeat no-repeat
      background-size cover
      height 600px
  .section-1
    height 700px
    .container
      display flex
      align-items center
      height 100%
      h2
        padding 20px 0
        font-weight 100
        font-size 20px 
      p
        width 150px
        height 1px
        background #fff
  .section-2
    .container
      display flex
      align-items center
      height 100%
      >div
        width 400px
  .section-3
    .container
      width 800px
    h2
      padding-top 30px
      text-align center
    p
      line-height 30px
  .section-4
    height 852px
    background rgba(1,1,1,1)
    .container
      position relative
      img
        width 100%
        height 852px
      .first
        position absolute
        top 320px
      .second
        position absolute
        top 760px
     .title
       color #0bf14c
       padding-bottom 10px
       span
         font-size 30px
         font-weight 400
      p
        font-size 14px
      .one
        left 80px
      .two
        left 290px
      .three
        left 550px
      .four
        left 795px
      .five
        left 1020px
  .section-5 
    .container
      justify-content flex-end
  .section-6
    height 700px
  .section-7
    background #181818
    color #fff
    .container
      padding-top 30px
      p
        padding-bottom 30px
      
  
  
  h2
    font-size 25px
    padding-bottom 30px
  p
    font-weight 100
  h1
    color #0bf14c
    font-weight 400
    font-size 35px
    padding 20px 0
@media (max-width:600px)
  #dpower
    .section-1
      height 300px
      .container
        h2
          font-size 16px
    .section-2
      padding-top 20px
      .container
        align-items flex-start
    .mobile-3
      background-size cover!important
      background-position center!important
      background-repeat no-repeat!important
      height 400px!important
      background-image url('https://cdn.swellpro.cn/mobileDpower/large-capacity-m.jpg')!important
    .section-3
      h2
        text-align left
      .container
        width auto
        padding-top 0px!important
    .section-4
      height auto
      p
        font-size 12px
      .container
        padding 0px
        img
          height 700px
        .line-1
          top 130px
        .line-2
          top 265px
        .line-3
          top 445px
        .line-4
          top 630px
        .column-1
          left 20px
        .column-2
          left 150px
        .column-3
          left 280px
    .section-5
      .container
        >div
          margin-top 400px
    .section-6
      height 600px
    .section-8
      .container
        >div
          margin-top 400px
    #speci
      .bottom
        >img
          width 100%
          height 580px
        .power
          left 60px
          bottom 350px
        .line
          left 200px
          top 310px
        .adaptor
          top 150px
          left 200px
        .pack
          left 130px
          top 580px
    h1
      font-size 28px
    h2
      padding 20px 0
</style>